// @flow
import React from 'react'
import Sidebar from 'containers/SidebarContainer'
// import DateSelect from 'components/DateSelect'
import { Link } from 'react-router-dom'
import { Spin, Collapse, Table, Select, Button, Icon, Row, Col } from 'antd'
import EchartMap from 'components/EchartMap'
import AgGrid from 'components/AgGrid'
import styles from './Home.css'
// import imgName from './imgName.json'
import { connect } from 'react-redux'
import { toggleSidebar } from 'store/modules/sidebar'
import { saveHistory } from 'store/modules/homeHistory'
// import { saveUserId } from 'store/modules/user'
import universalFetch, { handleFetchError } from 'store/modules/fetch'
import classnames from 'classnames/bind'
import R from 'ramda'
const cx = classnames.bind(styles)
const Panel = Collapse.Panel
const Option = Select.Option
// const {MonthPicker, RangePicker} = DatePicker
const customPanelStyle = {
  background: '#242426',
  color:'#fff',
  marginBottom: 10,
  border: 0,
  boxShadow:'2px 3px 5px #bab8b8'
}
let columns = [{
  title: '机组类型',
  dataIndex: 'type',
  width: 70
}, {
  title: '总台数',
  dataIndex: 'count',
  width: 60
}, {
  title: '在线台数',
  dataIndex: 'onlineCount',
  width: 70
}, {
  title: '报警台数',
  dataIndex: 'alarmCount',
  width: 70,
  render: (text) => {
    return <span style={{ color:'#c00' }}>{text}</span>
  }
}]
let footTableCol = [
  {
    title: '序号',
    dataIndex: 'value',
    width: '27%'
  },
  {
    title: '客户名称',
    dataIndex: 'label',
    width: '27%'
  },
  {
    title: '客户名称',
    dataIndex: 'location',
    width: '27%'
  }
]
const eventColumns = [{
//   title: '事件类型',
//   dataIndex: 'type',
//   width: 60,
//   render: (text, record) => {
//     let type1 = ''
//     if (text === 'fault') {
//       type1 = '故障'
//     } else if (text === 'maintenance') {
//       type1 = '维修'
//     }
//     return type1
//   }
// },{
  title: '事件名称',
  dataIndex: 'eventName',
  width: '27%'
}, {
  title: '客户名称',
  dataIndex: 'customer.name',
  width: '27%'
}, {
  title: '机组名称',
  dataIndex: 'device.name',
  width: '27%'
},
// {
//   title: '发生时间',
//   dataIndex: 'startTime',
//   render: (text) => {
//     return m(new Date(text)).format('YYYY-MM-DD HH:mm')
//   }
// },
{
  title: '状态',
  dataIndex: 'eventStatus',
  width: '19%'
}]
type State = {
  dataSource: Array<Object>,
  dataLen: string,
  eventData: Array<Object>,
  eventLen: string,
  mapData: Array<Object>,
  count: Object,
  condition: Object,
  selectVal: Object,
  loading: boolean,
  industry: Array<Object>,
  deviceStatus: Array<Object>,
  source: Array<Object>,
  footVisible: boolean,
  rightVisible: boolean,
  enname: string,
  userName: string,
  userCount: string // 当前登录用户数
}
// let source = [] // 图例（数据来源）
// let deviceStatus = [] // 图例（状态）
// let industry = [] // 图例（行业）
type Props = {
  // saveUserId: Function,
  userId: string,
  userMenu: Object,
  toggleSidebar: Function,
  saveHistory: Function,
  history: Object
}
class Home extends React.Component {
  props: Props
  state: State
  SelectMap: Function
  selectVal: Function
  getDate: Function
  hideFoot: Function
  showFoot: Function
  hideRight: Function
  showRight: Function
  clearSelect: Function
  goToDeviceOverView: Function
  changeLengent: Function
  getUserIdFuction: Function // 根据userId取客户数据、异常数据
  popClick: Function
  handleSelect: Function
  constructor (props: Object) {
    super(props)
    this.state = {
      footVisible: false,
      rightVisible: false,
      loading:true,
      dataSource: [],
      dataLen: '',
      eventData: [],
      eventLen: '',
      mapData: [],
      count:{
        count:[],
        startDate:'',
        endDate:''
      },
      condition:{
        location:[],
        industry:[],
        customerType:[],
        dataSource:[],
        owner:[],
        customerId:[]
      },
      industry: [],
      deviceStatus: [],
      source: [],
      selectVal: {
        location:'',
        industry:'',
        customerType:'',
        dataSource:'',
        owner:'',
        customerId:'',
        date:'',
        status: ''
      },
      enname: '',
      userName: '',
      userCount: ''
    }
    this.SelectMap = this.SelectMap.bind(this)
    this.selectVal = this.selectVal.bind(this)
    this.getDate = this.getDate.bind(this)
    this.hideFoot = this.hideFoot.bind(this)
    this.showFoot = this.showFoot.bind(this)
    this.hideRight = this.hideRight.bind(this)
    this.showRight = this.showRight.bind(this)
    this.clearSelect = this.clearSelect.bind(this)
    this.goToDeviceOverView = this.goToDeviceOverView.bind(this)
    this.changeLengent = this.changeLengent.bind(this)
    this.getUserIdFuction = this.getUserIdFuction.bind(this)
    this.popClick = this.popClick.bind(this)
    this.handleSelect = this.handleSelect.bind(this)
  }

  componentWillMount () {
    const component = this
    // 左下角客户
    universalFetch(`${__SERVICE_API__}device/devices/count`)
      .then((res) => res.json())
      .then((json) => {
        if (json.code !== 200000) {
          throw new Error(JSON.stringify({ code: json.code, message: json.message }))
        }
        const result = json.result
        component.setState({
          count:{
            count:[result.customerCount, result.count, result.onlineCount],
            startDate:result.startDate,
            endDate:result.endDate
          }
        })
      })
      .catch((error) => {
        handleFetchError(error)
        console.error(error)
      })
      // 查询负责人
    universalFetch(`${__SERVICE_API__}sys/users?pageSize=20000`)
      .then(res => res.json())
      .then((json) => {
        if (json.code !== 200000) {
          throw new Error(JSON.stringify({ code: json.code, message: json.message }))
        }
        const { condition } = this.state
        this.setState({
          condition: Object.assign({}, condition, {
            owner:json.result.map((d) => {
              return { value: d.loginName, label: d.loginName }
            })
          })
        })
      })
      .catch((error) => {
        handleFetchError(error)
        console.error(error)
      })
      // 查询条件
    const types = ['location', 'industry', 'customerType', 'dataSource', 'owner']
    // $FlowFixMe
    universalFetch(`${__SERVICE_API__}device/conditions?types=${types}`)
      .then((res) => res.json())
      .then((json) => {
        if (json.code !== 200000) {
          throw new Error(JSON.stringify({ code: json.code, message: json.message }))
        }
        const result = json.result
        const { condition } = this.state
        component.setState({
          condition: Object.assign({}, condition, {
            location:result.location,
            industry:result.industry,
            customerType:result.customerType,
            dataSource:result.dataSource
            // owner:result.owner,
          })
        })
      })
      .catch((error) => {
        handleFetchError(error)
        console.error(error)
      })
      // 右下角图例dataSource
    universalFetch(`${__SERVICE_API__}sys/dicts?type=deviceStatus`)
      .then((res) => res.json())
      .then((json) => {
        if (json.code !== 200000) {
          throw new Error(JSON.stringify({ code: json.code, message: json.message }))
        }
        this.setState({
          deviceStatus: json.result
        })
        // deviceStatus = json.result
      })
      .catch((error) => {
        handleFetchError(error)
        console.error(error)
      })
    universalFetch(`${__SERVICE_API__}sys/dicts?type=dataSource`)
      .then((res) => res.json())
      .then((json) => {
        if (json.code !== 200000) {
          throw new Error(JSON.stringify({ code: json.code, message: json.message }))
        }

        this.setState({
          source: json.result
        })
        // source = json.result
      })
      .catch((error) => {
        handleFetchError(error)
        console.error(error)
      })
    universalFetch(`${__SERVICE_API__}sys/dicts?type=industry`)
      .then((res) => res.json())
      .then((json) => {
        if (json.code !== 200000) {
          throw new Error(JSON.stringify({ code: json.code, message: json.message }))
        }

        this.setState({
          industry: json.result
        })
      })
      .catch((error) => {
        handleFetchError(error)
        console.error(error)
      })
      // 当前登录用户数
    universalFetch(`${__SERVICE_API__}analysis/redis/loginInfo`)
      .then((res) => res.json())
      .then((json) => {
        if (json.code !== 200000) {
          throw new Error(JSON.stringify({ code: json.code, message: json.message }))
        }
        const result = json.result
        const usersLen = result.users.length
        this.setState({
          userCount: usersLen + ' / ' + result.countAll
        })
      })
      .catch((error) => {
        handleFetchError(error)
        console.error(error)
      })
  }

  componentDidMount () {
    const { userId } = this.props
    // this.getUserType(userId) // 首次进页面负责人为登录页面
    this.props.saveHistory(this.props.history)
    const component = this
    // 地图
    this.draw(this.props)
    // 总工厂数
    universalFetch(`${__SERVICE_API__}device/devices/types/count`)
      .then((res) => res.json())
      .then((json) => {
        if (json.code !== 200000) {
          throw new Error(JSON.stringify({ code: json.code, message: json.message }))
        }
        component.setState({
          dataSource:json.result.map((data, index) => {
            data['key'] = index
            data['alarmCount'] = data.alarmCount || 0
            data['count'] = data.count || 0
            data['onlineCount'] = data.onlineCount || 0
            return data
          }),
          dataLen:'总设备类型数 (' + json.result.length + ')'
        })
      })
      .catch((error) => {
        handleFetchError(error)
        console.error(error)
      })
    if (!userId) return
    this.getUserIdFuction(userId)
  }

  shouldComponentUpdate (nextProps) {
    if (!R.equals(nextProps, this.props)) {
      const { userId } = nextProps
      this.getUserIdFuction(userId)
      // this.getUserType(userId) // 首次进页面负责人为登录用户
      nextProps.saveHistory(nextProps.history)
      this.draw(nextProps)
      return true
    }
    return true
  }

  getUserIdFuction (userId) {
    const component = this
    // 异常事件
    universalFetch(`${__SERVICE_API__}device/events1/events?userId=${userId}&order=desc`)
    .then(res => {
      return res.json()
    })
      .then((json) => {
        if (json.code !== 200000) {
          throw new Error(JSON.stringify({ code: json.code, message: json.message }))
        }
        component.setState({
          eventData:json.result.map((data, index) => {
            data['key'] = index
            data['eventName'] = <a onClick={function () { component.goToDeviceOverView(data) }}>{data.eventName}</a>
            return data
          }),
          eventLen:'异常事件 (' + json.result.length + ')'
        })
      })
      .catch((error) => {
        handleFetchError(error)
        console.error(error)
      })
    // 搜索条件客户
    universalFetch(`${__SERVICE_API__}device/customers?userId=${userId}&pageSize=200000`)
      .then(res => res.json())
      .then((json) => {
        if (json.code !== 200000) {
          throw new Error(JSON.stringify({ code: json.code, message: json.message }))
        }
        const { condition } = this.state
        condition['customerId'] = json.result.map((item) => {
          return {
            label: item.name,
            value: item.id,
            location: item.region.location
          }
        })
        this.setState({
          condition,
        })
      })
      .catch((error) => {
        handleFetchError(error)
        console.error(error)
      })
  }

  goToDeviceOverView (data: Object) {
    let channel = []
    if (data.checkName) {
      channel = [data.channelId + '__' + data.checkName.split('__')[1]]
    }
    const { history } = this.props
    const location = {
      pathname:`/device-file/${data.deviceId}/condition`,
      state: {
        defaultActiveKey: 'historyTab',
        // dynamicIndicator: '', // 以前不传指标的时候
        dynamicIndicator: data.sensorNameEn + '___' + data.variableNameEn,
        defaultChannel: channel,
        startTime: data.startTime,
        endTime: data.endTime
      }
    }
    history.push(location)
  }

  hideFoot () {
    this.setState({
      footVisible: false
    })
  }
  showFoot () {
    this.setState({
      footVisible: true
    })
  }

  hideRight () {
    this.setState({
      rightVisible: false
    })
  }
  showRight () {
    this.setState({
      rightVisible: true
    })
  }

  draw (props) {
    this.setState({
      loading: true
    })
    // function getHomeMapImageUrl (list: Array<string>) {
    //   let url = ''
    //   for (let key:number in list) {
    //     let item = list[key]
    //     url += imgName[item]
    //   }
    //   return 'symbol/' + url.substring(1, url.length) + '.png'
    // }

    const component = this
    const { selectVal } = this.state
    let d
    let selectArr = ['pageSize=200000']
    for (d in selectVal) {
      if (selectVal[d] !== '') {
        selectArr.push(d + '=' + selectVal[d])
      }
    }
    const condit = selectArr.join('&')
    const { userId } = props
    if (!userId) return
    let API = `${__SERVICE_API__}device/customers?userId=${userId}&${condit}`
    universalFetch(API)
    .then((res) => res.json())
    .then((json) => {
      if (json.code !== 200000) {
        throw new Error(JSON.stringify({ code: json.code, message: json.message }))
      }
      if (json.result.length > 0) {
        component.setState({
          loading: false,
          mapData:json.result.map((data, index) => {
            // let img = ''
            // let dataSources = ''
            // if (data.hasOwnProperty('dataSources')) {
            //   dataSources = data.dataSources.join(',')
            //   img = getHomeMapImageUrl([data.industry, data.priorStatus, dataSources])
            // } else {
            //   img = 'symbol/default.png'
            // }
            // if (symbolName.indexOf(img) === -1) {
            //   img = 'symbol/default.png'
            // }
            // data['symbol'] = 'image://' + img
            data['key'] = index
            data['symbol'] = 'image://' + data.iconUrl
            data['symbolSize'] = [56, 37]
            data['value'] = [data.region.longitude, data.region.latitude]
            return data
          })
        })
      } else {
        component.setState({
          loading: false,
          mapData:[]
        })
      }
    })
    .catch((error) => {
      handleFetchError(error)
      console.error(error)
    })
  }
  SelectMap () {
    this.draw(this.props)
  }
  selectVal (key: string, value: string) {
    this.setState({
      selectVal: Object.assign({}, this.state.selectVal, {
        [key]: value
      })
    })
  }
  clearSelect () {
    this.setState({
      selectVal: {}
    })
  }
  changeLengent (key: string, value: string) {
    this.setState({
      selectVal: {
        [key]: value
      }
    }, () => {
      this.draw(this.props)
    })
  }
  getDate (date) {
    this.setState({
      selectVal: Object.assign({}, this.state.selectVal, {
        date: date
      })
    }, () => {
      this.draw(this.props)
    })
  }

  getUserType (userId) {
    if (!userId) {
      return
    }
    universalFetch(`${__SERVICE_API__}sys/users/${userId}/roles`)
    .then(res => {
      return res.json()
    })
      .then((json) => {
        if (json.code !== 200000) {
          throw new Error(JSON.stringify({ code: json.code, message: json.message }))
        }
        this.setState({ enname: json.result[0].enname }, this.getUserName(userId))
      })
      .catch((error) => {
        handleFetchError(error)
        console.error(error)
      })
  }
  getUserName (userId) {
    universalFetch(`${__SERVICE_API__}sys/users/${userId}`)
      .then(res => res.json())
      .then((json) => {
        if (json.code !== 200000) {
          throw new Error(JSON.stringify({ code: json.code, message: json.message }))
        }
        let { loginName } = json.result
        const selectVal = Object.assign({}, this.state.selectVal, { owner: loginName })
        if (this.state.enname === 'Administrator') return
        this.setState({ selectVal }, this.SelectMap)
      })
      .catch((error) => {
        handleFetchError(error)
        console.error(error)
      })
  }
  popClick (e: Object) {
    e.stopPropagation()
  }
  handleSelect (e: Object) {
    if (e === 'type') {
      columns = [{
        title: '机组类型',
        dataIndex: 'type',
        width: 70
      }, {
        title: '总台数',
        dataIndex: 'count',
        width: 60
      }, {
        title: '在线台数',
        dataIndex: 'onlineCount',
        width: 70
      }, {
        title: '报警台数',
        dataIndex: 'alarmCount',
        width: 70,
        render: (text) => {
          return <span style={{ color:'#c00' }}>{text}</span>
        }
      }]
      universalFetch(`${__SERVICE_API__}device/devices/types/count`)
        .then((res) => res.json())
        .then((json) => {
          if (json.code !== 200000) {
            throw new Error(JSON.stringify({ code: json.code, message: json.message }))
          }
          this.setState({
            dataSource:json.result.map((data, index) => {
              data['key'] = index
              data['alarmCount'] = data.alarmCount || 0
              data['count'] = data.count || 0
              data['onlineCount'] = data.onlineCount || 0
              return data
            })
            // dataLen:'总设备类型数 (' + json.result.length + ')'
          })
        })
        .catch((error) => {
          handleFetchError(error)
          console.error(error)
        })
    } else {
      columns = [{
        title: '省份名称',
        dataIndex: 'type',
        width: 70
      }, {
        title: '总台数',
        dataIndex: 'count',
        width: 60
      }, {
        title: '在线台数',
        dataIndex: 'onlineCount',
        width: 70
      }, {
        title: '报警台数',
        dataIndex: 'alarmCount',
        width: 70,
        render: (text) => {
          return <span style={{ color:'#c00' }}>{text}</span>
        }
      }]
      universalFetch(`${__SERVICE_API__}device/devices/types/count`)
        .then((res) => res.json())
        .then((json) => {
          if (json.code !== 200000) {
            throw new Error(JSON.stringify({ code: json.code, message: json.message }))
          }
          this.setState({
            dataSource:[]
            // dataLen:'总设备类型数 (' + json.result.length + ')'
          })
        })
        .catch((error) => {
          handleFetchError(error)
          console.error(error)
        })
    }
  }
  render () {
    const { dataSource, dataLen, eventData, eventLen, count,
      deviceStatus, source,
      condition, industry, footVisible, rightVisible, selectVal } = this.state
    const { toggleSidebar } = this.props
    const component = this
    const footleft = ['客户数量', '机组数量', '机组在线总数']
    const selects = [
      ['location', '地域'],
      ['industry', '行业'],
      ['customerType', '客户价值'],
      ['dataSource', '数据来源'],
      ['owner', '负责人'],
      ['customerId', '客户名称']
    ]

    const footIconStyle = cx({
      'footCon-icon': true,
      'down': footVisible,
      'up': !footVisible
    })
    const footConStyle = cx({
      'footCon': true,
      'footCon-show': footVisible,
      'footCon-hidden': !footVisible
    })
    const rightIconStyle = cx({
      'rightCon-icon': true,
      'left': rightVisible,
      'right': !rightVisible
    })
    const rightConStyle = cx({
      'rightCon': true,
      'rightCon-show': rightVisible,
      'rightCon-hidden': !rightVisible
    })
    // const liLen = Math.ceil(industry.length / 5)
    const rowData = condition.customerId
    return (
      <div className={styles['home']}>
        <Sidebar id='home' type='pin' title='查询条件'>
          <div className={styles['sideGroup']}>
            {
              selects.map((data, index) => {
                const key = data[0]
                return <Row key={index}>
                  <Col span={8} style={{ textAlign: 'right', paddingRight: 10 }}>{data[1]}</Col>
                  <Col span={14}>
                    {
                      (<Select
                        key={index}
                        size='small'
                        style={{ width:125, color:'#999' }}
                        placeholder={data[1]}
                        showSearch
                        filterOption={(input, option, e) => {
                          return option.props.children.indexOf(input) >= 0
                        }}
                        value={selectVal[key]}
                        onChange={function (value) { component.selectVal(key, value) }} >
                        <Option key='0' value=''>全部</Option>
                        {
                        condition[key].map((d, i) => {
                          return <Option key={i + 1} value={d.value}>{d.label}</Option>
                        })
                        }
                      </Select>)
                    }
                  </Col>
                </Row>
              })
            }
          </div>
          <p className={styles['slideFoot']}>
            <Button size='small' style={{ marginRight:55 }} onClick={this.clearSelect}>清除</Button>
            <Button size='small' style={{ marginRight:5 }} onClick={() => toggleSidebar('home')}>取消</Button>
            <Button size='small' type='primary' onClick={this.SelectMap} >确定</Button>
          </p>
        </Sidebar>
        <Spin className={styles['spin']} spinning={this.state.loading} />
        <EchartMap data={this.state.mapData} style={{ height:1000, width:1200 }} />
        <div className={styles['homeTop']}>
          <ul className={styles['homeTab']}>
            <Link to='/'>
              <li className={styles['act']}>客户分布</li>
            </Link>
            <Link to='/fault-distribution'>
              <li>故障分布</li>
            </Link>
          </ul><br />
          {
            // <DateSelect onChange={this.getDate} />
          }
        </div>
        {
          !footVisible
          ? <Icon type='up' className={footIconStyle} onClick={this.showFoot} id='footCon-up' />
          : false
        }
        <div className={footConStyle}>
          {
            footVisible
            ? <Icon type='down' className={footIconStyle} onClick={this.hideFoot} />
            : false
          }
          <div className={styles['footConLeft']}>
            {
              count.count.map((data, i) => {
                return <ul key={i} className={styles['footList']}>
                  <li className={styles['act']}><span>{footleft[i]}</span></li>
                  <li style={{ marginLeft:2 }}><span>{data}</span></li>
                </ul>
              })
            }
            { /* <ul className={styles['footList']}>
                <li className={styles['act']}><span>时间范围</span></li>
                <li style={{ marginLeft:2, width:222 }}>
                  <span style={{ paddingRight:10 }}>
                    {count.startDate}</span>至<span style={{ paddingLeft:10 }}>{count.endDate}
                    </span>
                </li>
              </ul> */}
            <ul className={styles['footList']}>
              <li className={styles['act']}><span>当前登录用户数</span></li>
              <li style={{ marginLeft:2 }}><span>{this.state.userCount}</span></li>
            </ul>
          </div>
          <div>
            <Table
              rowKey={(record) => record.id}
              dataSource={rowData}
              columns={footTableCol}
              size='small'
              pagination={false}
              scroll={{ y: 184 }}
              className={styles['foot-table']}
            />
          </div>

          <div className={styles['footConRight']}>
            <table className={styles['footTable']}>
              <tr className={styles['foottr1']}>
                { /* <td>数据来源</td> */ }
                <td>状态</td>
                { /* <td>行业</td> */ }
              </tr>
              <tr>
                { /* <td className={styles['footTd1']}>
                  <div className={styles['footTd']}>
                    {
                      source.map((d, i) => {
                        return <label key={i}
                          onClick={function () { component.changeLengent('dataSource', d.value) }}>
                          <img src={d.image} style={{
                            marginRight: 3
                          }} />{d.label}</label>
                      })
                    }
                  </div>
                </td> */}
                <td className={styles['footTd2']}>
                  <div className={styles['footTd']}>
                    {
                      deviceStatus.map((d, i) => {
                        return <label key={i} onClick={function () { component.changeLengent('status', d.value) }}>
                          <svg width='10' height='10' version='1.1'
                            xmlns='http://www.w3.org/2000/svg'>
                            <rect width='10' height='10' className={styles['rectSvg']}
                              style={{ fill:d.color }} />
                          </svg>
                          <span className={styles['rectSpan']}>{d.label}</span>
                        </label>
                      })
                    }
                  </div>
                </td>
                { /* <td>
                  <div className={styles['footTd']}>
                    {
                      industry.map((d, i) => {
                        return <label key={i}
                          onClick={function () { component.changeLengent('industry', d.value) }}>
                          <img src={d.image} />{d.label}</label>
                      })
                    }
                  </div>
                </td> */}
              </tr>
            </table>
            {
              // <ul>
              //   <li>
              //     {
              //       source.map((d, i) => {
              //         return <p key={i}
              //           onClick={function () { component.changeLengent('dataSource', d.value) }}>
              //           <img src={d.image} style={{
              //             marginRight: 3
              //           }} />{d.label}</p>
              //       })
              //     }
              //   </li>
              //   <li style={{ minWidth:110 }}>
              //     {
              //       deviceStatus.map((d, i) => {
              //         return <p key={i} onClick={function () { component.changeLengent('status', d.value) }}>
              //           <svg width='10' height='10' version='1.1'
              //             xmlns='http://www.w3.org/2000/svg'>
              //             <rect width='10' height='10' className={styles['rectSvg']}
              //               style={{ fill:d.color }} />
              //           </svg>
              //           <span className={styles['rectSpan']}>{d.label}</span>
              //         </p>
              //       })
              //     }
              //   </li>
              //   <li className={styles['footTipli']}>
              //     {
              //       industry.map((d, i) => {
              //         return <p key={i}
              //           onClick={function () { component.changeLengent('industry', d.value) }}>
              //           <img src={d.image} />{d.label}</p>
              //       })
              //     }
              //   </li>
              // </ul>
            }
          </div>
        </div>
        {
          rightVisible
          ? <Icon type='right' className={rightIconStyle} onClick={this.hideRight} />
          : <Icon type='left' className={rightIconStyle} onClick={this.showRight} />
        }
        <div className={rightConStyle}>
          <Collapse bordered={false} defaultActiveKey={['1', '2', '3']}>
            <Panel header={
              <div onClick={this.popClick}>
                <Select defaultValue='type' style={{ width: 120 }} onSelect={this.handleSelect}>
                  <Option value='type'>机组类型</Option>
                  <Option value='province'>省份</Option>
                </Select>
              </div>
              } key='1' style={customPanelStyle} >
              <Table
                rowKey={(record) => record.key}
                dataSource={dataSource}
                columns={columns}
                size='small'
                pagination={false}
                scroll={{ y: 184 }}
              />
            </Panel>
            <Panel header={eventLen} key='2' style={customPanelStyle}>
              <Table
                rowKey={(record) => record.key}
                dataSource={eventData}
                columns={eventColumns}
                size='small'
                pagination={false}
                scroll={{ y: 184 }}
              />
            </Panel>
          </Collapse>
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    userId: state.user.userId,
    userMenu: state.menu.userMenu
  }
}
const mapDispatchToProps = {
  toggleSidebar,
  saveHistory
}
export default connect(mapStateToProps, mapDispatchToProps)(Home)
